<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="function-box">
					<view class="function-item flexWrap">
						<view class="th1">用户名</view>
						<view class="th2">手机号</view>
						<view class="th3">角色</view>
						<view class="th4">状态</view>
						<view class="th5">操作</view>
					</view>
					<view class="function-item flexWrap" v-for="(item,index) in clerkList" :key="index">
						<view class="th1">{{item.username}}</view>
						<view class="th2">
							{{item.mobile}}
						</view>
						<view class="th3">
							{{rolesList[item.roles]}}
						</view>
						<view class="th4" :class="{red:item.status!='normal'}">
							{{item.status=='normal'?'正常':'禁用'}}
						</view>
						<view  class="th5" @tap="goSet(item)">编辑</view>
					</view>
					<view class="empty-box" v-if="clerkList.length==0">
						<image src="https://static.mo-yu.vip/wechat/images/orderEmpty.png"></image>
					</view>
				</view>
				<!-- <view class="remaks-box">
					<view>1、如需新增或者删除桌台包房，请群内联系管理员。</view>
					<view>2、使用中台桌不可编辑。</view>
				</view> -->
				
				<!--操作指引悬浮按钮 -->
				<guideline :path="'moduleB/manage/clerkEdit'"></guideline>
				<view class="bottom-box flexWrapNo">
					<view class="define-btn" @tap="goPage('/moduleB/manage/clerkEdit')">新增</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				clerkList:[],
				rolesList:['','店长','运维','保洁']
			}
		},
		onLoad(options) {
			this.getList();
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			goSet(item){
				this.goPage('/moduleB/manage/clerkEdit?id='+item.id)
			},
			// 获取数据
			getList(){
				this.$request.post(this.$api.staffList,{
					store_id:uni.getStorageSync('store_id'),
				}, {
					token:true
				}).then(res => {
					if (res.code==1) {
						let {
							data = {}
						} = res;
						for (let i in data.admin_list) {
							data.admin_list[i].roles=this.identityIncludes(data.admin_list[i].roles)
						}
						this.clerkList=data.admin_list
						console.log(this.clerkList)
					}
				})
			},
			identityIncludes(roles){
				let rolesList=roles.split(',').map(item=>Number(item))
				let identity=null
				if(rolesList.includes(1)){
					identity=1//最高权限
					return identity;
				}else if(rolesList.includes(2)){
					identity=2//商务
					return identity;
				}else if(rolesList.includes(3)){
					identity=3//微股东
					return identity;
				}
			},
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 200upx;
	}
	.content {
		padding: 0 36upx;
		.function-box{
			background: #1D1C5C;
			border-radius: 10upx;
			padding: 30upx;
			.function-item{
				font-size: 24upx;
				color: #FFFFFF;
				height: 100upx;
				line-height: 100upx;
				border-bottom: 1rpx solid #36355E;
				border-left: 1rpx solid #36355E;
				border-right: 1rpx solid #36355E;
				&:nth-of-type(1){
					border-top: 1rpx solid #36355E;
					font-weight: bold;
					font-size: 24upx;
					.th4{
						color: #FFFFFF;
					}
				}
				.th1{
					width: 150upx;
					height: 100upx;
					text-align: center;
					border-right: 1rpx solid #36355E;
					overflow-x: scroll;
				}
				.th2{
					height: 100upx;
					width: 180upx;
					border-right: 1rpx solid #36355E;
					text-align: center;
					flex: none;
				}
				.th3{
					height: 100upx;
					width: 100upx;
					text-align: center;
					border-right: 1rpx solid #36355E;
				}
				.th4{
					height: 100upx;
					width: 100upx;
					text-align: center;
					border-right: 1rpx solid #36355E;
				}
				.red{
					color: red;
				}
				.th5{
					height: 100upx;
					width: 100upx;
					text-align: center;
					color: #26BCFD;
				}
				.grey{
					color: #82819B;
				}
			}
			.add-btn{
				font-size: 24upx;
				text-align: center;
				color: #26BCFD;
				height: 100upx;
				line-height: 100upx;
				border-bottom: 1rpx solid #36355E;
				border-left: 1rpx solid #36355E;
				border-right: 1rpx solid #36355E;
			}
		}
		.remaks-box{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #82819B;
			line-height: 50rpx;
			margin-top: 12upx;
		}
		.bottom-box{
			height: 120rpx;
			background: #1D1C5C;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			.define-btn{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				width: 322rpx;
				height: 80rpx;
				background: #26BCFD;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				text-align: center;
			}
		}
	}
</style>
